<template>
  <div>
    <!-- 二级路由视图 -->
    <transition enter-active-class="animate__animated animate__bounceInLeft">
      <router-view></router-view>
    </transition>

    <!-- 底部导航 -->
    <footer>
      <router-link active-class="active" to="/index/home">
        <i class="iconfont icon-shouye"></i>
        <div>首页</div>
      </router-link>
      <router-link active-class="active" to="/index/cate">
        <i class="iconfont icon-fenlei"></i>
        <div>分类</div>
      </router-link>
      <router-link active-class="active" to="/index/shop">
        <i class="iconfont icon-gouwucheman"></i>
        <div>购物车</div>
      </router-link>
      <router-link active-class="active" to="/index/mine">
        <i class="iconfont icon-wode"></i>
        <div>我的</div>
      </router-link>
    </footer>
  </div>

</template>

<script>
export default {

}
</script>

<style lang="less" scoped>
@import "../../less/index.less";
footer{
  background: #fff;
  width: 100vw;
  height: 1rem;
  position: fixed;
  left: 0px;
  bottom: 0px;
  display: flex;
  border: 0.01rem solid #ccc;
}
footer a{
  flex: 1;
  font-size: 0.3rem;
  text-align: center;

}footer a i{
  line-height: 0.4rem;
}
footer div{
  line-height: 0.6rem;
}
.router-link-active{
  color:red
}
.active{
  color: red;
}
</style>